<div class="w-full flex justify-between items-center px-4 py-2">
  <div class="pac-page-title">{{ 'PAC.KEY_WORDS.BUSINESS_AREA' | translate: {Default: "Business Area"} }}</div>
  <div ngmButtonGroup >
    <button mat-raised-button color="primary" (click)="createBusinessArea(null)">
        <div class="flex items-center">
            <mat-icon>add</mat-icon>
            {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }} {{ 'PAC.KEY_WORDS.BUSINESS_AREA' | translate: {Default: "Business Area"} }}
        </div>
    </button>
  </div>
</div>
<mat-divider />

<ngm-splitter [type]="SplitterType.Horizontal" class="flex-1">
  <ngm-splitter-pane minSize="300px" size="30%" >
    <pac-business-areas class="w-96"></pac-business-areas>
  </ngm-splitter-pane>

  <ngm-splitter-pane class="flex-1 flex flex-col">
    <router-outlet #o="outlet"></router-outlet>
  </ngm-splitter-pane>
</ngm-splitter>
